<template>
	<view class="container">
		<view class="nav-wrap">
			<uni-navbar
				@tabClick="tabClick"
				:navList="navList"
				:tabCurrentIndex="tabCurrentIndex"
				:borderColor="themeStyles.lightMainColor"
			></uni-navbar>
		</view>

		<view class="content">
			<!-- 空白页 -->
			<empty
				v-if="loaded && loadingType !== 'loading' && !orderList.length"
				:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
				desc="没有相关订单 ~"
			></empty>

			<!-- 订单列表 -->
			<template v-if="orderList.length">
				<view class="order-wrap">
					<view
						v-for="(item, index) in orderList"
						:key="index"
						class="order-item"
						@click="
							navTo(
								`/pages/order/orderDetail?orderId=${item.order_id}`
							)
						"
					>
						<view class="i-top">
							<text class="time">{{ item.insTime }}</text>
							<text
								:style="themeStyles.textMainColor"
								class="state"
								>{{
									item.status === 1
										? "售后中"
										: item.statusValue
								}}</text
							>
						</view>

						<!-- 商品区域 begin -->
						<view class="goods-list">
							<uni-goods-col
								v-for="(goodsItem,
								goodsIndex) in item.orderGoodsList"
								:key="goodsIndex"
								:goods="goodsItem"
								:routeLink="
									`/pages/user/pages/order/orderDetail?orderId=${item.orderId}`
								"
								:goodsPrice="goodsItem.priceStr.split('.')"
								:goodsTypeText="goodsItem.skuName"
								:latePrice="goodsItem.priceOut"
							>
								<!-- 主题色 -->
								<view slot="metaRight">
									<view class="goods-item-num"
										>x{{ goodsItem.buyNumber }}</view
									>
								</view>
							</uni-goods-col>
						</view>
						<!-- 商品区域 end -->

						<view class="price-box">
							<text class="num"
								>共{{ item.buyNumberTotal }}件商品 实付款</text
							>
							<view class="cut-price">
								<text class="price">{{
									item.totalFee[0]
								}}</text>
								<text class="decimal">{{
									item.totalFee[1] || "00"
								}}</text>
							</view>
						</view>

						<view v-if="item.status !== 200" class="action-box">
							<button
								v-if="viewBtn(item.status, 1, item.type)"
								@click.stop="queryLogistisc(item.logisticsNo)"
								class="action-btn"
							>
								查看物流
							</button>
							<button
								v-if="viewBtn(item.status, 2, item.type)"
								@click.stop="onCancelOrder(item.orderId)"
								class="action-btn"
							>
								取消订单
							</button>
							<button
								v-if="viewBtn(item.status, 2, item.type)"
								@click.stop="nowPay(item.orderId,item)"
								:style="themeStyles.btnAuxiliaryColor"
								class="action-btn recom"
							>
								立即付款
							</button>
							<button
								v-if="viewBtn(item.status, 5, item.type)"
								@click.stop="nowPay(item.orderId,item)"
								:style="themeStyles.btnPrimary"
								class="action-btn recom"
							>
								出示核销码
							</button>
							<button
								v-if="viewBtn(item.status, 4, item.type)"
								@click.stop="onDeleteOrder(item.orderId)"
								class="action-btn"
							>
								刪除订单
							</button>
							<button
								v-if="viewBtn(item.status, 3, item.type)"
								@click.stop="onConfirmReceipt(item.orderId)"
								:style="themeStyles.btnAuxiliaryColor"
								class="action-btn recom"
							>
								确认收货
							</button>
							<!-- <button v-if="viewBtn(item.status, 4)" @click.stop="nowPay(item.orderId)" class="action-btn recom">再次购买</button> -->
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType">
					</uni-load-more>
				</view>
			</template>
		</view>
		<!-- 选择支付方式弹层 -->
		<pop-pay
			:type="orderType"
			:showPopPay="showPopPay"
			:orderInfo="orderInfo"
			@close="closePopPay"
			@select-pay-type="selectPayMoneyTypeAfter"
			@payBefore="callPayBefore"
			@payFn="callPay"
			@paySuccessAfter="paySuccessAfter"></pop-pay>
	</view>
</template> 

<script>
import { queryOrderList } from "@/lib/api/orderServer/order";

import { baseFileUri } from "@/utils/request/baseConfig";

import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";

/** components begin */
import empty from "@/components/empty";
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import uniNavbar from "@/components/uniNavbar/uniNavbar";
/* 选择支付方式弹层 */
import popPay from "@/components/popPay";
/** components end */

/** mixins begin */
import orderMixin from "@/mixins/order/order";
import payMixin from "@/mixins/pay";
/** mixins end */

let currentPage = 1;
export default {
	mixins: [orderMixin, payMixin],

	components: {
		uniNavbar,
		uniLoadMore,
		uniGoodsCol,
		empty,
		popPay
	},

	data() {
		return {
			scrollTop: 0,
			baseFileUri,
			tabCurrentIndex: 0,
			orderList: [],
			navList: [
				{
					state: 0,
					text: "全部"
				},
				{
					state: 100,
					text: "待付款"
				},
				{
					state: 150,
					text: "待成团"
				},
				{
					state: 250,
					text: "待到店"
				},
				/* {
					state: 200,
					text: "待发货"
				}, */
				{
					state: 301,
					text: "待收货"
				},
				{
					state: 400,
					text: "已完成"
				}
			]
		};
	},

	computed: {},

	onLoad(options) {
		this.tabCurrentIndex = parseInt(options.orderStatus || 0);
		currentPage = 1;
		this.tabClick(this.tabCurrentIndex);
		this.getOrderList();
	},

	onShow() {
		// currentPage = 1;
		// this.tabClick(this.tabCurrentIndex);
		// this.getOrderList();
	},

	//下拉刷新
	async onPullDownRefresh() {
		currentPage = 1;
		await this.getOrderList();
		uni.stopPullDownRefresh();
	},

	//加载更多
	onReachBottom() {
		this.loadingMore();
	},

	methods: {
		/*  */
		async onCancelOrder(orderId) {
			try {
				await this.cancelOrder(orderId);
				//Object.assign(this.$data, this.$options.data());
				this.getOrderList();
			} catch (error) {
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async onConfirmReceipt(orderId) {
			try {
				await this.confirmReceipt(orderId);
				//Object.assign(this.$data, this.$options.data());
				this.getOrderList();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async onDeleteOrder(orderId) {
			try {
				await this.deleteOrder(orderId);
				//Object.assign(this.$data, this.$options.data());
				this.getOrderList();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},
		// 点击--立即支付
		nowPay(orderId,orderInfo){
			//console.log(orderInfo);
			//return;
			//订单信息
			this.orderInfo = null;
			this.orderInfo = orderInfo;
			//订单类型
			this.orderType = orderInfo.type;
			//获取要支付的订单id
			this.orderInfo.orderId = orderId;
			//console.log(this.orderInfo);
			//打开支付选择弹层
			this.openPopPay();
		},
		//  调起支付
		async callPay(val,callback) {
			let payInfo;
			try {
				this.selectPayTypePop = true;
				payInfo = await this.onPay(this.orderInfo.orderId,this.payMoneyType);
				//
				this.tabClick(0);
				this.getOrderList();
			} catch (error) {
				console.log("error", error);
				//this.$api.showToast(error.resultInfo || "支付失败");
			}
			//支付结果
			callback(payInfo);
		},

		loadingMore() {
			const index = this.tabCurrentIndex;

			if (
				this.loadingType === "loading" ||
				this.loadingType === "noMore"
			) {
				return;
			}
			currentPage++;
			this.getOrderList();
		},

		/** 处理订单数据 (后期优化至中间服务器) begin */
		parseOrderList(orderList) {
			if (orderList.length) {
				orderList.forEach((item, index) => {
					orderList[index].totalFee = `${item.totalFee}`.split(".");
					//   orderList[index].orderGoodsList = this.splitGoodsPrice(
					//     orderList[index].orderGoodsList,
					//     "price",
					//     "priceStr"
					//   );
				});
			}
			return orderList;
		},
		/** 处理订单数据 (后期优化至中间服务器) end */

		// 获取订单列表
		async getOrderList() {
			//这里是将订单挂载到tab列表下
			const index = this.tabCurrentIndex || 0;
			const navItem = this.navList[index];
			const status = navItem.state !== 0 ? navItem.state : "";

			this.loadingType = "loading";
			// navItem.loadingType = "loading";
			const propsData = {
				status,
				currentPage
			};
			try {
				const res = await queryOrderList(propsData);
				console.log(res.data);
				if (currentPage === 1) {
					// navItem.orderList = this.parseOrderList(res.data.list);
					this.orderList = this.parseOrderList(res.data.list);
				} else {
					// navItem.orderList = navItem.orderList.concat(
					//     this.parseOrderList(res.data.list)
					// );
					this.orderList = this.orderList.concat(
						this.parseOrderList(res.data.list)
					);
				}
				const noMore = this.orderList.length >= res.data.total;
				this.loadingType = noMore ? "noMore" : "more";
				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				this.loaded = true;
				this.loadingType = "noMore";
				this.$api.showToast(error.resultInfo || "出错了* _ *");
			}
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.getOrderList();
			// this.loadData('tabChange');
		},

		//顶部tab点击
		tabClick(index) {
			this.scrollTop = Math.random();
			currentPage = 1;
			this.tabCurrentIndex = index;
			this.getOrderList();
		}
	}
};
</script>

<style lang="scss">
@import "@/common/styles/order/orderList.scss";
@import "@/common/styles/navBar.scss";
page,
.container {
	background: $theme-main-bg-color;
	height: 100%;
}

.swiper-box {
	margin-top: 20rpx;
	height: calc(100vh - 88rpx);
}

.content {
	padding-top: 112rpx;
}

.list-scroll-content {
	height: 100%;
}

.uni-swiper-item {
	height: auto;
}

/* load-more */
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	align-items: center;
	justify-content: center;
}
</style>
